﻿<MRow>
    <MCol Cols="12"
          Sm="6"
          OffsetSm="3">
        <MCard>
            <MToolbar Color="light-blue"
                      Light
                      Extended>
                <ChildContent>
                    <MAppBarNavIcon></MAppBarNavIcon>
                    <MToolbarTitle class="white--text">
                        My files
                    </MToolbarTitle>
                    <MSpacer></MSpacer>
                    <MButton Icon>
                        <MIcon>mdi-magnify</MIcon>
                    </MButton>
                    <MButton Icon>
                        <MIcon>mdi-view-module</MIcon>
                    </MButton>
                </ChildContent>

                <ExtensionContent>
                    <MButton Fab
                             Color="cyan accent-2"
                             Bottom
                             Left
                             Absolute
                             OnClick="()=> dialog = !dialog">
                        <MIcon>mdi-plus</MIcon>
                    </MButton>
                </ExtensionContent>
            </MToolbar>
            <MList TwoLine
                   Subheader>
                <MSubheader Inset>
                    Folders
                </MSubheader>
                @foreach (var item in items)
                {
                    <MListItem @key="item.Title" Link>
                        <MListItemAvatar>
                            <MIcon Class="@item.IconClass">
                                @item.Icon
                            </MIcon>
                        </MListItemAvatar>
                        <MListItemContent>
                            <MListItemTitle>
                                @item.Title
                            </MListItemTitle>
                            <MListItemSubtitle>
                                @item.SubTitle
                            </MListItemSubtitle>
                        </MListItemContent>
                        <MListItemAction>
                            <MButton Icon>
                                <MIcon color="grey lighten-1">
                                    mdi-information
                                </MIcon>
                            </MButton>
                        </MListItemAction>
                    </MListItem>
                }

                <MDivider Inset></MDivider>

                <MSubheader Inset>
                    Files
                </MSubheader>

                @foreach (var item in items2)
                {
                    <MListItem @key="item.Title" Link>
                        <MListItemAvatar>
                            <MIcon Class="@item.IconClass">
                                @item.Icon
                            </MIcon>
                        </MListItemAvatar>
                        <MListItemContent>
                            <MListItemTitle>
                                @item.Title
                            </MListItemTitle>
                            <MListItemSubtitle>
                                @item.SubTitle
                            </MListItemSubtitle>
                        </MListItemContent>
                        <MListItemAction>
                            <MButton Icon Ripple>
                                <MIcon color="grey lighten-1">
                                    mdi-information
                                </MIcon>
                            </MButton>
                        </MListItemAction>
                    </MListItem>
                }
            </MList>

            <MDialog Value="dialog"
                     MaxWidth="500">
                <MCard>
                    <MCardText>
                        <MTextField TValue="string" Label="File name"></MTextField>

                        <small class="grey--text">* This doesn't actually save.</small>
                    </MCardText>

                    <MCardActions>
                        <MSpacer></MSpacer>

                        <MButton Text
                                 Color="primary"
                                 OnClick="()=> dialog = false">
                            Submit
                        </MButton>
                    </MCardActions>
                </MCard>
            </MDialog>
        </MCard>
    </MCol>
</MRow>

@code {
    private bool dialog;

    private List<dynamic> items = new List<dynamic>()
    {
        new
        {
            Icon ="mdi-folder",
            IconClass ="grey lighten-1 white--text",
            Title ="Photos",
            SubTitle= "Jan 9, 2014"
        },
        new
        {
            Icon ="mdi-folder",
            IconClass ="grey lighten-1 white--text",
            Title ="Recipes",
            SubTitle= "Jan 17, 2014"
        },
        new
        {
            Icon ="mdi-folder",
            IconClass ="grey lighten-1 white--text",
            Title ="Work",
            SubTitle= "Jan 28, 2014"
        }
    };

    private List<dynamic> items2 = new List<dynamic>()
    {
        new
        {
            Icon ="mdi-clipboard-text",
            IconClass ="blue white--text",
            Title ="Vacation itinerary",
            SubTitle= "Jan 20, 2014"
        },
        new
        {
            Icon ="mdi-gesture-tap-button",
            IconClass ="amber white--text",
            Title ="Kitchen remodel",
            SubTitle= "Jan 10, 2014"
        }
    };
  }